<template>
	<view>
		<uni-popup id="privacy" type="center" ref="privacyPopup" :maskClick="false">
			<view class="ws-privacy-popup" :style="rootStyle">
				<view class="ws-privacy-popup__header">
					<!--标题-->
					<view class="ws-picker__title">用户隐私保护提示</view>
				</view>
				<view class="ws-privacy-popup__container">
					<text>感谢您使用本应用，您使用本应用的服务之前请仔细阅读并同意</text>
					<text class="ws-privacy-popup__container-protocol" style="color: #69C5FD;" :style="protocolStyle"
						@click="openPrivacyContract">{{ privacyContractName}}</text>
					<text>。当您点击同意并开始使用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法使用相应服务。</text>
				</view>
				<view class="ws-privacy-popup__footer">
					<button class="is-agree" :style="agreeStyle" id="agree-btn" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgree">
						同意并继续
					</button>
					<button class="is-disagree" id="disagree-btn" @click="handleDisagree">
						不同意
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getContext,
		getComponent
	} from './util'
	const privacyResolves = new Set()
	let privacyHandler = null
	// 注册监听
	if (uni.onNeedPrivacyAuthorization) {
		uni.onNeedPrivacyAuthorization((resolve) => {
			if (typeof privacyHandler === 'function') {
				privacyHandler(resolve)
			}
		})
	}
	export default {
		name: "privacyPopup",
		data() {
			return {

			};
		},
		props: {
			privacyContractName: {
				type: String,
				default: '',
			}
		},
		created() {
			privacyHandler = (resolve) => {
				console.log('resolve', resolve)
				const context = getContext()
				const privacyPopup = getComponent(context, '#privacy-popup')
				console.log('privacyPopup', privacyPopup)
				if (privacyPopup) {
					const privacy = getComponent(privacyPopup, '#privacy')
					if (privacy && privacy.open) {
						privacy.open()
					}
				}
				privacyResolves.add(resolve)
			}
			if (this.enableAutoProtocol && uni.getPrivacySetting) {
				uni.getPrivacySetting({
					success: res => {
						console.log('res ok', res)
						if (res.privacyContractName) {

						}
					},
					fail: (err) => {
						console.log('res err', err)
					},
					complete: () => {}
				})
			}
		},
		methods: {
			openPopup() {
				console.log('openPopup')
				this.$refs.privacyPopup.open('center')
			},
			closePopup() {
				this.$refs.privacyPopup.close()
			},
			openPrivacyContract() {
				uni.openPrivacyContract({
					success: (res) => {
						console.log('openPrivacyContract success')
					},
					fail: (res) => {
						console.error('openPrivacyContract fail', res)
					}
				})
			},
			/**
			 * 拒绝隐私协议
			 */
			handleDisagree() {
				uni.setStorageSync('isArgee', false)
				this.closePopup()


				privacyResolves.forEach((resolve) => {
					resolve({
						event: 'disagree'
					})
				})
				privacyResolves.clear()
			},
			/**
			 * 同意隐私协议
			 */
			handleAgree() {
				console.log('同意隐私协议==============')
				uni.setStorageSync('isArgee', true)
				this.closePopup()
				privacyResolves.forEach((resolve) => {
					resolve({
						event: 'agree',
						buttonId: 'agree-btn'
					})
				})
				privacyResolves.clear()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ws-privacy-popup {
		padding: 48rpx;
		box-sizing: border-box;
		overflow: hidden;
		width: 560rpx;
		background: linear-gradient(180deg, #e5edff 0%, #ffffff 100%);
		border-radius: 24rpx;

		&__header {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 550;
			color: #1a1a1a;
			line-height: 52rpx;
			margin-bottom: 48rpx;
		}

		&__container {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 48rpx;

			&-protocol {
				font-weight: 550;
				color: #46D17E;
			}
		}

		&__footer {
			display: flex;
			flex-direction: column;

			.is-disagree,
			.is-agree {
				width: 100%;
				height: 88rpx;
				background: #ffffff;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.is-agree {
				// background: linear-gradient(90deg, #64D690 0%, #57BFCA 97%);
				background: linear-gradient(153deg, #69C5FD 0%, #0089CF 63%);
				color: #ffffff;
				margin-bottom: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			button {
				border: none;
				outline: none;

				&::after {
					border: none;
				}
			}
		}
	}
</style>